<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="900px"
    @close="close"
  >
    <el-divider content-position="left">
      <b class="color-primary">基础信息</b>
    </el-divider>
    <el-descriptions
      border
      :column="4"
      content-class-name="contentClass"
      label-class-name="labelClass"
      size="small"
    >
      <el-descriptions-item label="储血号">
        {{ formData.blood_id }}
      </el-descriptions-item>
      <el-descriptions-item label="血源">
        {{ formData.blood_source }}
      </el-descriptions-item>
      <el-descriptions-item label="血液成分">
        {{ formData.BLOOD_TYPE_NAME }}
      </el-descriptions-item>
      <el-descriptions-item label="抗筛">
        {{ formData.ABScr }}
      </el-descriptions-item>
      <el-descriptions-item label="初检ABO">
        {{ formData.blood_group || '' }}
      </el-descriptions-item>
      <el-descriptions-item label="初检Rh(D)">
        {{ formData.blood_rhd || '' }}
      </el-descriptions-item>
      <el-descriptions-item label="ABO">
        {{ getBloodGroupRecheck(formData) }}
      </el-descriptions-item>
      <el-descriptions-item label="Rh(D)">
        {{ getBloodRhdRecheck(formData) }}
      </el-descriptions-item>
    </el-descriptions>
    <div class="h12"></div>
    <div class="h12"></div>
    <el-divider content-position="left">
      <b class="color-primary">机器结果</b>
    </el-divider>
    <el-table
      border
      :data="filterInspectAbos(formData.inspectAbosFormat)"
      :row-class-name="tableRowClassName"
      stripe
      style="width: 100%"
    >
      <el-table-column
        align="center"
        label="时间"
        prop="created_at"
        show-overflow-tooltip=""
        width="160"
      />
      <el-table-column align="center" label="抗A" prop="AntiA" />
      <el-table-column align="center" label="抗B" prop="AntiB" />
      <el-table-column align="center" label="抗D" prop="AntiD" />
      <el-table-column align="center" label="Ac" prop="Ac" />
      <el-table-column align="center" label="Bc" prop="Bc" />
      <el-table-column align="center" label="Ctrl" prop="Ctrl" />
      <el-table-column align="center" label="抗筛" prop="ABScr" />
    </el-table>
    <template v-if="formData.updated_user">
      <div class="h12"></div>
      <div class="h12"></div>
      <el-divider content-position="left">
        <b class="color-primary">试管结果</b>
      </el-divider>
      <el-table border :data="recheckData" stripe style="width: 100%">
        <el-table-column align="center" label="抗A" prop="AntiA" />
        <el-table-column align="center" label="抗B" prop="AntiB" />
        <el-table-column align="center" label="抗D" prop="AntiD" />
        <el-table-column align="center" label="Ac" prop="Ac" />
        <el-table-column align="center" label="Bc" prop="Bc" />
        <el-table-column align="center" label="Ctrl" prop="Ctrl" />
        <el-table-column align="center" label="抗筛" prop="ABScr" />
      </el-table>
    </template>
    <div class="h12"></div>
    <div class="h12"></div>
    <el-divider content-position="left">
      <b class="color-primary">其它信息</b>
    </el-divider>
    <el-descriptions
      border
      content-class-name="contentClass"
      label-class-name="labelClass"
      size="small"
    >
      <el-descriptions-item label="备注" :span="2">
        {{ formData.descri }}
      </el-descriptions-item>
      <el-descriptions-item label="RhD阴性确认试验">
        {{ formData.rhd_descri }}
      </el-descriptions-item>
      <el-descriptions-item label="复检时间：">
        {{ getAttr('created_at') }}
      </el-descriptions-item>
      <el-descriptions-item label="修改时间">
        {{ formData.updated_at }}
      </el-descriptions-item>
      <el-descriptions-item label="修改者">
        {{ formData.updated_user }}
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script>
  import { getOne } from '@/api/bloodRecheck'
  export default {
    data() {
      return {
        title: '详情',
        dialogVisible: false,
        formData: {},
        recheckData: [
          {
            AntiA: '',
            AntiB: '',
            AntiD: '',
            Ctrl: '',
            Ac: '',
            Bc: '',
            ABScr: '',
          },
        ],
      }
    },
    methods: {
      tableRowClassName({ row }) {
        if (row.active) {
          return 'bg-success'
        }
        return ''
      },
      getAttr(attr) {
        if (this.formData.blood_id) {
          if (this.formData.updated_user) {
            return this.formData[attr] || ''
          } else {
            if (this.formData.inspectAbosFormat.length > 0) {
              const active = this.formData.inspectAbosFormat.filter((val) => {
                return +val.active === 1
              })
              if (active.length > 0) {
                return active[0][attr] || ''
              }
              return this.formData.inspectAbosFormat[0][attr] || ''
            }
            return ''
          }
        }
        return ''
      },
      show(row) {
        if (row.blood_id) {
          this.getOne(row.blood_id)
        }
      },
      async getOne(blood_id) {
        const { data } = await getOne(blood_id)
        this.formData = data
        this.recheckData[0] = { ...this.recheckData[0], ...this.formData }
        this.recheckData = JSON.parse(JSON.stringify(this.recheckData))
        this.dialogVisible = true
      },
      filterInspectAbos(rows) {
        if (rows) {
          return rows
        }
        return []
      },
      getBloodGroupRecheck(formData) {
        if (formData.blood_group_recheck) {
          let descri = ''
          if (formData.blood_group_recheck === '基因型') {
            descri = `(${formData['blood_group_descri']})`
          }
          return formData.blood_group_recheck + descri
        }
        return ''
      },
      getBloodRhdRecheck(formData) {
        if (formData.blood_rhd_recheck) {
          let descri = ''
          if (formData.blood_rhd_recheck === '基因型') {
            descri = `(${formData['blood_rhd_descri']})`
          }
          return formData.blood_rhd_recheck + descri
        }
        return ''
      },
      close() {
        this.formData = {}
      },
    },
  }
</script>

<style lang="scss" scoped></style>
